<!--
 * @Author: 肖芬芳 10547202+xiao-fenfang@user.noreply.gitee.com
 * @Date: 2022-07-22 09:09:15
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:21:29
 * @FilePath: \vue-api-serverc:\Users\Administrator\Desktop\vite-project\src\components\form\modify\AmForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="awform">
    <div v-if="formItem && formItem.length > 0" class="form-search-input">
      <el-form
        ref="formRef"
        :inline="inline"
        :model="formData"
        :rules="rules"
        class="search-form"
        label-width="120px"
        :label-position="labelPosition"
      >
        <el-row v-for="(items, index) in formItem" :key="index">
          <el-col v-for="(item, i) in items" :key="i" :span="item.width">
            <el-form-item :key="i" :label="item.label" :prop="item.value">
              <!-- 正常输入框 -->
              <el-input
                v-if="item.type === 'text'&&item.value!='password'"
                v-model="formData[item.value]"
                clearable
                :maxlength='item.maxlength'
              >
              </el-input>

              <!-- 密码输入框 -->
              <el-input
                v-if="item.type === 'password'"
                v-model="formData[item.value]"
                clearable
                :maxlength='item.maxlength'
                show-password
              >
              </el-input>

              <slot name="selector" v-if="item.type === 'select'">
              </slot>

              <slot name="password" v-if="item.value==='password'">
              </slot>

              <!-- 树形选择器 -->
              <slot name="tree" v-if="item.type=='tree'">
              </slot>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import {
  FormInstance, // 获取表单对象
  FormRules,
} from "element-plus";

// 表单对象form，用来获取表单的一些属性
const formRef = ref<FormInstance>();
defineExpose({
  formRef
})

const labelPosition=ref('left')
const inline=ref(true)

// const props = defineProps({
//   formData: {
//     type: Object,
//     default: () => {},
//   },
//   formItem: {
//     type: Array,
//     default: () => [{}],
//   },
// });

interface Props {
  formData:any;
  formItem: any;
}

const props = withDefaults(defineProps<Props>(), {});


const ruleObj:any = new Object();
for (let items of props.formItem) {
  for (let item of items) {
    ruleObj[item.value]=item.rule
  }
}
const rules = reactive<FormRules>(ruleObj)

</script>

<style lang="scss">
.el-row {
  margin-bottom: 8px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-form-item{
  width:90%
}
</style>